<template>
  <!--  <div class="childremMenux" >-->
  <el-sub-menu class="subMenu" :class="{'firstMenu':props.isFirst}" :popper-class="props.popperClass"
               v-bind="props.item"
               :index="props.item[propsD.index]" v-if="props.item[propsD.show]!=false">
    <template #title>
      <slot name="title" :data="props.item">{{ props.item[propsD.title] }}</slot>
    </template>

    <!-- region 子级 -->
    <span v-for="(menuItem,index) in props.item[propsD.children]" :key="menuItem[propsD.index]">
        <!-- region 当前子级已经是最后一级 -->
        <span v-if="(menuItem[propsD.children] == undefined || menuItem[propsD.children].length<=0) && menuItem[propsD.show]!=false">
          <el-menu-item class="menuItem"  @click="clickChildFn(menuItem)"
                        :index="menuItem[propsD.index]" v-bind="menuItem">
              <slot name="title" :data="menuItem">
                {{ menuItem[propsD.title] }}
              </slot>
          </el-menu-item>
        </span>
      <!-- endregion -->

      <!-- region 存在子级 -->
        <children-menux v-else :item="menuItem" :props="propsD"
                        @click-child="clickChildFn" :popper-class="props.popperClass">
          <template #title="{data}">
            <slot name="title" :data="data">
              {{ data[propsD.title] }}
            </slot>
          </template>
        </children-menux>
      <!-- endregion -->
      </span>
    <!-- endregion -->

  </el-sub-menu>
  <!--  </div>-->
</template>

<script setup>
import {computed} from 'vue'
import ChildrenMenux from "./xhykMenuItem2.vue";
import { ElMenuItem,ElSubMenu } from 'element-plus'

const props = defineProps({
  item: {
    type: [Object],
    default: []
  },
  props: {
    type: Object,
    default: {}
  },
  isFirst: {
    type: Boolean,
    default: false
  },
  // 弹窗类名
  popperClass: {
    type: String,
    default: ''
  },

})

const emit = defineEmits(['clickChild'])


// 设置默认的字段
const propsD = computed(() => {
  return {
    index: props.props.index || 'name',
    title: props.props.title || 'title',
    icon: props.props.icon || 'icon',
    children: props.props.children || 'children',
    show: props.props.show || 'show',
  }
})

// 点击子级
const clickChildFn = (item) => {
  emit('clickChild',item)
}
</script>

<style scoped lang='scss'>
.childremMenux {
  height: 100%;
  .subMenu {
    height: 100%;
  }
}
</style>